<template>
  <div class="activities-center">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">
        <el-icon><Calendar /></el-icon> 活动中心
      </h1>
    </div>

    <!-- 按钮式选项卡 -->
    <div class="button-tabs">
      <el-button
          v-for="tab in tabs"
          :key="tab.value"
          :type="activeTab === tab.value ? 'primary' : ''"
          @click="changeTab(tab.value)"
          class="tab-button"
      >
        {{ tab.label }}
      </el-button>
    </div>

    <!-- 动态内容区域 -->
    <div class="content-area">
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, shallowRef } from 'vue';
import { Calendar } from '@element-plus/icons-vue';

// 导入活动组件
import LaborCheckIn from './components/LaborCheckIn.vue';
import LaborWeek from './components/LaborWeek.vue';
import Practice from './components/Practice.vue';
import ThemeEducation from './components/ThemeEducation.vue';
import DefenseEducation from './components/DefenseEducation.vue';
import VolunteerService from './components/VolunteerService.vue';
import Questionnaire from './components/Questionnaire.vue';
import SpecialActivities from './components/SpecialActivities.vue';
import ActivityReview from './components/ActivityReview.vue';

// 选项卡定义
const tabs = ref([
  { label: '劳动打卡', value: 'checkin', component: LaborCheckIn },
  { label: '劳动周', value: 'week', component: LaborWeek },
  { label: '综合实践', value: 'practice', component: Practice },
  { label: '主题教育', value: 'theme', component: ThemeEducation },
  { label: '国防教育', value: 'defense', component: DefenseEducation },
  { label: '志愿服务', value: 'volunteer', component: VolunteerService },
  { label: '调查问卷', value: 'questionnaire', component: Questionnaire },
  { label: '特色活动', value: 'special', component: SpecialActivities },
  { label: '活动回顾', value: 'review', component: ActivityReview }
]);

// 当前激活的选项卡
const activeTab = ref('checkin');

// 当前组件 (使用shallowRef优化性能)
const currentComponent = shallowRef(LaborCheckIn);

// 切换选项卡
const changeTab = (tab: string) => {
  activeTab.value = tab;
  const tabConfig = tabs.value.find(t => t.value === tab);
  if (tabConfig) {
    currentComponent.value = tabConfig.component;
  }
};
</script>

<style scoped>
.activities-center {
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #1e62ec;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* 按钮式选项卡样式 */
.button-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.button-tabs .el-button {
  border-radius: 16px;
  padding: 8px 20px;
  transition: all 0.3s;
}

/* 内容区域 */
.content-area {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .button-tabs {
    gap: 8px;
  }

  .button-tabs .el-button {
    padding: 6px 15px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .activities-center {
    padding: 10px;
  }

  .page-title {
    font-size: 20px;
  }

  .button-tabs {
    gap: 5px;
  }

  .content-area {
    padding: 15px;
  }
}
</style>
